<template>
  <div>
    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
      全选
    </el-checkbox>
    <el-form label-width="140px" :model="formData" size="mini">
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          Header
        </el-col>
      </el-row>
      <el-row>
        <!--rdFunction  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsRDFunction">{{ $t('ecdfc.rdFunction') }}</el-checkbox>
        </el-col>
        <!-- category -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsCategory">{{ $t('ecdfc.category') }}</el-checkbox>
        </el-col>
        <!-- fdDesign -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsFdDesign">{{ $t('ecdfc.fdDesign') }}</el-checkbox>
        </el-col>
        <!-- riskImpact -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsRiskImpact">{{ $t('ecdfc.riskImpact') }}</el-checkbox>
        </el-col>
        <!-- deadline -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsDeadline">{{ $t('ecdfc.deadline') }}</el-checkbox>
        </el-col>
        <!--plan  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsPlan">
            {{ $t('ecdfc.plan') }}
          </el-checkbox>
        </el-col>
        <!--Issubject  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.Issubject">
            {{ $t('ecdfc.subject') }}
          </el-checkbox>
        </el-col>
        <!--Iscommodity  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.Iscommodity">
            {{ $t('ecdfc.commodity') }}
          </el-checkbox>
        </el-col>
        <!--IsassignedTime  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsassignedTime">
            {{ $t('ecdfc.assignedTime') }}
          </el-checkbox>
        </el-col>
        <!--IsisAssigned  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsisAssigned">
            {{ $t('ecdfc.isAssigned') }}
          </el-checkbox>
        </el-col>
        <!--IsisGcmCommit  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsisGcmCommit">
            {{ $t('ecdfc.isGcmCommit') }}
          </el-checkbox>
        </el-col>
        <!--IsisGcmReject  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsisGcmReject">
            {{ $t('ecdfc.isGcmReject') }}
          </el-checkbox>
        </el-col>
        <!--owner  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsOwner">
            {{ $t('ecdfc.owner') }}
          </el-checkbox>
        </el-col>
        <!--initialDate  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsInitialDate">
            {{ $t('ecdfc.initialDate') }}
          </el-checkbox>
        </el-col>
        <!--closeDate  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsCloseDate">
            {{ $t('ecdfc.closeDate') }}
          </el-checkbox>
        </el-col>
        <!--svtBomStatus  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsSvtBomStatus">
            {{ $t('ecdfc.svtBomStatus') }}
          </el-checkbox>
        </el-col>
        <!-- costDown -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsCostDown">
            {{ $t('ecdfc.costDown') }}
          </el-checkbox>
        </el-col>
        <!--apprvoal  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsApprvoal">
            {{ $t('ecdfc.apprvoal') }}
          </el-checkbox>
        </el-col>
        <!--remark  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsRemark">
            {{ $t('ecdfc.remark') }}
          </el-checkbox>
        </el-col>
      </el-row>
      <!-- Base Project -->
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          Old
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsOldPn">
            {{ $t('ecdfc.pn') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsOldQty">
            {{ $t('ecdfc.qty') }}
          </el-checkbox>
        </el-col>
      </el-row>
      <!-- New Project -->
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          New
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewPn">
            {{ $t('ecdfc.pn') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewQty">
            {{ $t('ecdfc.qty') }}
          </el-checkbox>
        </el-col>
      </el-row>
      <!-- GCM -->
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          GCM
        </el-col>
      </el-row>
      <el-row>
        <!-- gcmFunction -->
        <el-col v-if="isGcmEdit" :span="12">
          <el-checkbox v-model="formData.IsGcmFunction">
            {{ $t('FdData.gcmFunction') }}
          </el-checkbox>
        </el-col>
        <!-- GcmOwner -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsGcmOwner">{{ $t('FdData.gcmOwner') }}</el-checkbox>
        </el-col>
        <!-- gcmCostRemark -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsGcmCostRemark">
            {{ $t('FdData.gcmCostRemark') }}
          </el-checkbox>
        </el-col>
      </el-row>
    </el-form>

    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
export default {
  name: 'EcCellShowSet',
  components: {},
  props: {
    pageId: {
      type: String
    },
    cellIsShow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {},
      // 控制全选状态的复选框
      checkAll: false,
      isIndeterminate: true
    }
  },
  computed: {
    // 判断pageId展示不同的选项
    showDiffOptionsByPageId() {
      if (this.pageId && this.pageId === 'ecdfcView') {
        return false
      } else {
        return true
      }
    },
    // 部分页面GCM控制开关关闭
    isGcmEdit() {
      if (this.pageId && this.pageId === ('FdAssignPane' || 'FdFocalPane')) {
        return false
      } else {
        return true
      }
    }
  },
  watch: {
    // 监听formData的值控制 全选状态的展示
    formData: {
      handler() {
        const value = Array.from(new Set(Object.values(this.formData)))
        if (value && value.length > 1) {
          // 只要有两个值状态就是不确定
          this.isIndeterminate = true
        } else {
          if (value[0] === true) {
            this.checkAll = true
            this.isIndeterminate = false
          } else {
            this.checkAll = this.isIndeterminate = false
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.formData = this.$deepCopy(this.cellIsShow)
  },
  mounted() {},
  methods: {
    handleCheckAllChange(val) {
      for (const key in this.formData) {
        this.formData[key] = val
      }
    },

    save() {
      this.$emit('saveOperationData', this.formData)
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
